<template>
	<view class="body">
		<view class="one-product">
			<view class="f26 m20">
				订单号：{{detail.orderInfo.order_no}}
			</view>
			<view class="f32 m20 product">
				{{ formatStr(detail.orderInfo.product_name, 40) }}
			</view>
			<view class="f26 m20 gray9">
				{{ detail.orderInfo.product_attr }}
			</view>
			<view class="f26 m20 gray9">
				数量：{{ detail.orderInfo.total_num }}
			</view>
			<view class="f32 m20 product">
				{{detail.title}}&nbsp;&nbsp;&nbsp;&nbsp;{{detail.content}}
			</view>
			<view class="image-box">
				<image :src="item" style="width: 160rpx;height: 160rpx; border-radius: 20rpx; margin-left: 20rpx;" mode="aspectFit" v-for="(item,index) in  detail.images"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				detail: {
					orderInfo: {
						product_name: '',
						
					}
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getPlantDatail()
		},
		methods: {
			formatStr(str, type /*'date'|'money'|'week'|num */ ) {
				if (type === 'date')
					return str.substring(0, 10);
				if (typeof type === 'number')
					return `${str.substring(0, type)}...`;
				if (type === 'money')
					return str ? str : '-';
			},
			getPlantDatail() {
				let self = this
				self._post('order.complaint/detail', {
					id: self.id
				}, function(res) {
					if (res.code == 1) {
						self.detail = res.data
						// if(self.detail.orderInfo.product_attr) {
							
						// }
						console.log(self.detail)
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body {
	padding: 20rpx;
	box-sizing: border-box;
	
	.one-product {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		
		.product {
			font-weight: bold;
		}
		
		.image-box {
			display: flex;
			justify-content: flex-start;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
}
</style>